<script setup>
import {ref} from "vue"
// import entryList from '../package/entryList/entryList.vue'
//
const list = ref([
  1, 2, 3, 4, 5, 7, 8, 7, 4, 5, 1, 2, 4, 4, 84, 2, 1, 2, 1, 2, 3, 4, 5, 7, 8, 7,
  4, 5, 1, 2, 4, 4, 84, 2, 1, 2, 1, 2, 3, 4, 5, 7, 8, 7, 4, 5, 1, 2, 4, 4, 84,
  2, 1, 2, 1, 2, 3, 4, 5, 7, 8, 7, 4, 5, 1, 2, 4, 4, 84, 2, 1, 2, 1, 2, 3, 4, 5,
  7, 8, 7, 4, 5, 1, 2, 4, 4, 84, 2, 1, 2
])
</script>

<template>
  <div class="list-contaienr">
    <div class="" v-for="(item, index) in list" :key="index" v-entry="index">
      <entry-list :index="index">
        <div class="item">
          {{ item }}
        </div>
      </entry-list>
    </div>
  </div>
</template>

<style scoped>
.list-contaienr {
  text-align: center;
  width: 100%;
  background: #c0c7b5;
}

.item {
  background-color: #fff;
  margin-bottom: 10px;
}

.gradientAnimation {
  animation-name: gradient;
  animation-duration: 0.85s;
  animation-fill-mode: forwards;
  opacity: 0;
}

/* 不带前缀的放到最后 */
@keyframes gradient {
  0% {
    opacity: 0;
    transform: translate(-100px, 0px);
  }

  100% {
    opacity: 1;
    transform: translate(0px, 0px);
  }
}
</style>
